<script setup>
// 可能需要的导入，如图标库（假设项目已安装@heroicons/vue）
// import { IconName } from '@heroicons/vue/24/outline'
</script>

<template>
  <!-- 整体容器：浅蓝色背景，最小高度视口高度 -->
  <div class="min-h-screen bg-sky-50">
    <!-- 顶部导航栏：圆角磨砂背景 -->
    <nav class="px-8 py-4 backdrop-blur-lg bg-white/50 border-b border-sky-100">
      <div class="container mx-auto flex justify-between items-center">
        <div class="text-lg font-medium text-black">Alcex's Home</div>
        <div class="flex space-x-6">
          <a href="#" class="text-black hover:text-sky-600 transition-colors">关于</a>
          <a href="#" class="text-black hover:text-sky-600 transition-colors">项目</a>
          <a href="#" class="text-black hover:text-sky-600 transition-colors">联系</a>
        </div>
      </div>
    </nav>

    <!-- 主内容区：左右分栏 -->
    <div class="container mx-auto px-4 py-16 flex flex-col md:flex-row gap-8">
      <!-- 左侧内容 -->
      <div class="md:w-1/2 flex flex-col justify-center items-start space-y-6">
        <!-- 标题 -->
        <h1 class="text-4xl font-bold text-black">Hi, I'm Alcex 🧡</h1>
        <!-- 粉色爱心图标 -->
        <span class="text-2xl text-pink-500">♥</span>
        <!-- 副标题 -->
        <p class="text-2xl text-black">A <span class="font-mono">Developer</span></p>
        <!-- 描述文字 -->
        <p class="text-gray-800 text-lg">Always believe that something wonderful is about to happen.</p>
        <!-- 社交媒体图标 -->
        <div class="flex space-x-4 mt-4">
          <!-- 六个不同颜色的图标，示例使用emoji，实际可替换为图标组件 -->
          <a href="#" class="text-black text-2xl"><i>📘</i></a>
          <a href="#" class="text-blue-500 text-2xl"><i>🐦</i></a>
          <a href="#" class="text-red-500 text-2xl"><i>📸</i></a>
          <a href="#" class="text-green-500 text-2xl"><i>🌱</i></a>
          <a href="#" class="text-yellow-400 text-2xl"><i>💡</i></a>
          <a href="#" class="text-orange-500 text-2xl"><i>🎨</i></a>
        </div>
      </div>

      <!-- 右侧内容：圆形头像 -->
      <div class="md:w-1/2 flex justify-center items-center">
        <div class="w-64 h-64 bg-sky-100 rounded-full p-2">
          <img
            src="https://example.com/anime-avatar.jpg"  <!-- 替换为实际头像链接 -->
            alt="动漫头像"
            class="w-full h-full rounded-full object-cover"
          >
        </div>
      </div>
    </div>

    <!-- 底部文字 -->
    <div class="mt-8 py-4 text-center text-black">
      <p>“你特殊的遭遇并不是你可以特殊的理由。” —— CrankAR</p>
    </div>
  </div>
</template>